<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="app">
			<h3>全局组件name</h3>
			<quanju-component></quanju-component>
			
			<hr />
			
			<h3>局部组件name</h3>
			<jubu-component></jubu-component>
		</div>
		
		
		<template id="quanjuTemplate">
			<div>
				{{name}}
				
				<!-- 在全局组件中调用局部组件：不可以调用 -->
				<jubu-component></jubu-component>
				
				
			</div>
		</template>
		
		<template id="jubuTemplate">
			<div id="jubuTemplate">
				{{name}}
			</div>
		</template>
		
		
		<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			//2、定义全局组件
			Vue.component("quanjuComponent",{
				data: function(){
					return{
						name:"全局组件"
					}
				},
				template:"#quanjuTemplate",
				methods:{}
			})
			
			//1、定义局部组件
			let jubuComponent = {
				data: function(){
					return{
						name: "局部组件"
					}
				},
				template:"#jubuTemplate",
				methods:{}
			}
			
			
			
			const vue  = new Vue({
				el: "#app",
				data:{},
				methods:{},
				mounted() {
					
				},
				//1、局部组件
				components:{
					jubuComponent
				}
			})
		</script>
		
	</body>
</html>
